<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>米选列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fyn/style.css/}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fyn/my.css/}" media="all">

</head>
<body class="body">


<div class="my-btn-box layui-form">
    <span class="fr">
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" name="title" placeholder="商品标题" class="layui-input height33">
        </div>

         <div class="layui-input-inline">
            <select lay-filter="dis">

                   <option value="0">待审核</option>
                   <option value="1">通过</option>
                   <option value="2">拒绝</option>
                   <option value="3">终止</option>
                   <option value="4">暂停</option>

               </select>
        </div>


        <button class="layui-btn layui-btn-sm" id="search"><i class="layui-icon">&#xe615;</i></button>
    </span>
</div>


<!-- 表格 -->
<div id="dataTable" lay-filter="event"></div>
<div class="height50"></div>
<script th:src="@{/js/layui/layui.js}"></script>
<script th:src="@{/js/fyn/index.js}"></script>
<script th:src="@{/js/fyn/my.js}"></script>
<script type="text/javascript" th:src="@{/js/vip/vip_comm.js}"></script>
<script type="text/javascript" th:src="@{/js/vip/vip_table.js}"></script>
<script type="text/javascript" th:inline="javascript">

    // layui方法
    layui.use(['table', 'form', 'laypage', 'layer', 'vip_table', 'laydate'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery;

        //常规用法
        laydate.render({
            elem: '#startTime'
        });

        //常规用法
        laydate.render({
            elem: '#endTime'
        });

        laydate.render({
            elem: '#limitTime',
            type: 'datetime'
        });

        var inter = null;

        form.on('switch(close)', function (data) {

            if (this.checked) {
                inter = setInterval(function () {
                    tableIns.reload(getJson());
                }, 10000);
            } else {
                clearInterval(inter);
            }

        });


        // 表格渲染
        var tableIns = table.render({
            elem: '#dataTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: "full"    //容器高度
            , skin: 'line'
            , even: 'true'
            , cols: [[                  //标题栏
                {
                    field: 'id', title: '用户ID', width: '5%', sort: true, align: 'center', templet: function (d) {
                        return d.userId;
                    }

                }
                , {
                    field: 'zkFinalPrice', title: '原价', width: '5%', align: 'center', templet: function (d) {
                        return d.zkFinalPrice;
                    }
                }
                , {
                    field: 'couponAmount', title: '优惠券金额', width: '5%', align: 'center', templet: function (d) {
                        return d.couponAmount;
                    }
                }
                , {
                    field: 'commissionRate', title: '返佣比例', width: '5%', align: 'center', templet: function (d) {
                        return d.commissionRate;
                    }
                }
                , {
                    field: 'realMoney', title: '单价', width: '5%', align: 'center', templet: function (d) {
                        return d.realMoney;
                    }
                }
                , {
                    field: 'num', title: '数量', width: '5%', align: 'center', templet: function (d) {
                        return d.num;
                    }
                }
                , {
                    field: 'title', title: '商品标题', width: '10%', align: 'center', templet: function (d) {
                        return d.title;
                    }
                }

                , {
                    field: 'pictUrl', title: '商品图片', width: '10%', align: 'center', templet: function (d) {
                        return "<a style='margin-left: 5px;' target='_blank' href='" + d.pictUrl + "'><img src='" + d.pictUrl + "' width='60' height='80'  /></a>"
                    }
                }
                , {
                    field: 'url', title: '商品连接', width: '5%', align: 'center', templet: function (d) {
                        return "<a style='cursor: pointer;color: red'  target='_blank' href='" + d.url + "'><i class='layui-icon layui-icon-link'></i></a>";
                    }
                }
                , {
                    field: 'pName', title: '审核状态', width: '5%', align: 'center', templet: function (d) {

                        if (d.checkStatus == 0) {
                            return "待审核";
                        } else if (d.checkStatus == 1) {
                            return "通过";
                        } else if (d.checkStatus == 2) {
                            return "拒绝";
                        } else if (d.checkStatus == 3) {
                            return "终止";
                        } else if (d.checkStatus == 4) {
                            return "暂停";
                        }
                    }
                }

                , {
                    field: 'ctime',
                    align: 'center',
                    title: '发布时间',
                    sort: true,
                    width: "15%",
                    templet: function (d) {
                        return new Date(d.ctime).Format("yyyy-MM-dd hh:mm:ss");
                    }
                },
                {
                    field: 'sort', title: '是否置顶', width: "5%", event: 'setSort', templet: function (d) {
                        return "<input type='checkbox' name='sort'" + (d.sort == 1 ? "checked" : "") + " lay-skin=\"switch\" lay-text=\"置顶|不置顶\">";
                    }
                }
                , {
                    title: '操作', align: 'center', templet: function (d) {
                        var html = "<i class=\"layui-icon layui-icon-edit\" title=\"详情\" style=\"cursor: pointer\" lay-event=\"edit\"></i>";
                        if (d.checkStatus == 1) {
                            html += "<i class=\"layui-icon layui-icon-pause\" title=\"暂停\" style=\"cursor: pointer\" lay-event=\"toggle\"></i>";
                            html += "<i class=\"layui-icon layui-icon-circle-dot\" title=\"终止\" style=\"cursor: pointer\" lay-event=\"terminate\"></i>";
                        } else if (d.checkStatus == 2) {
                            html += "<i class=\"layui-icon layui-icon-ok-circle\" title=\"重新通过\" style=\"cursor: pointer\" lay-event=\"passAgain\"></i>";
                        } else if (d.checkStatus == 3) {
                            //终止
                        } else if (d.checkStatus == 4) {
                            html += "<i class=\"layui-icon layui-icon-play\" title=\"启动\" style=\"cursor: pointer\" lay-event=\"toggle\"></i>";
                            html += "<i class=\"layui-icon layui-icon-circle-dot\" title=\"终止\" style=\"cursor: pointer\" lay-event=\"terminate\"></i>";
                        }
                        html += "<i class=\"layui-icon layui-icon-delete\" title=\"删除\" style=\"cursor: pointer\" lay-event=\"delete\"></i>";


                        return html;

                    }
                } //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataCheck'
            , url: [[${basePath}]] + '/packet/mixuan/list'
            , method: 'get'
            , page: true
            , limits: [10, 30, 60, 90, 150, 300]
            , toolbar: '#topOperate'
            , limit: 10 //默认采用0
            , loading: true
            , where: getJson()
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                $("td[data-field='content']").each(function () {
                    $(this).find(".layui-table-cell").removeClass('layui-table-cell');
                });
            }
        });


        table.on('tool(event)', function (obj) {
            var data = obj.data;

            if (obj.event === 'setSort') {
                $.ajax({
                    type: "post",
                    url: [[${basePath}]] + "/packet/mixuan/sort/save",
                    data: {sort: data.sort == 0 ? 1 : 0, id: data.id},
                    success: function (res) {
                        if (res.success) {
                            layer.msg("操作完成", {icon: 1});
                            setTimeout(function () {

                            }, 1500);
                            tableIns.reload();
                        }
                    }
                });
            }

            if (obj.event === 'edit') {

                layer.open({
                    type: 2,
                    title: '米选详细',
                    shadeClose: true,
                    shade: 0.2,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['650px', '550px'],
                    content: [[${basePath}]] + '/packet/mixuan/detail/index?id=' + data.id
                });

            }

            //删除
            if (obj.event === 'delete') {
                layer.confirm("确定要删除吗", {
                    icon: 3,
                    btn: ['删除', '取消'],
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        type: "post",
                        url: [[${basePath}]] + "/packet/mixuan/delete",
                        data: {id: data.id},
                        success: function (res) {
                            if (res.success) {
                                layer.msg("已删除", {icon: 1});
                                setTimeout(function () {

                                }, 1500);
                                layer.close(index);

                                tableIns.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2});
                            }
                        }
                    });
                });
            }

            //暂停/启动
            if (obj.event === 'toggle') {
                var str = data.checkStatus == 1 ? "暂停" : "启动";
                layer.confirm("确定要" + str + "米选吗", {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        type: "post",
                        url: [[${basePath}]] + "/packet/mixuan/check",
                        data: {id: data.id, status: data.checkStatus == 1 ? 4 : 1},
                        success: function (res) {
                            if (res.success) {
                                layer.msg("操作成功", {icon: 1});
                                setTimeout(function () {

                                }, 1500);
                                layer.close(index);

                                tableIns.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2});
                            }
                        }
                    });
                });
            }
            //重审
            if (obj.event === 'passAgain') {
                layer.confirm("确定要重新审核通过吗？", {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        type: "post",
                        url: [[${basePath}]] + "/packet/mixuan/check",
                        data: {id: data.id, status: 1},
                        success: function (res) {
                            if (res.success) {
                                layer.msg("操作成功", {icon: 1});
                                setTimeout(function () {

                                }, 1500);
                                layer.close(index);

                                tableIns.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2});
                            }
                        }
                    });
                });
            }

            //终止
            if (obj.event === 'terminate') {
                layer.confirm("确定要终止米选吗", {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        type: "post",
                        url: [[${basePath}]] + "/packet/mixuan/check",
                        data: {id: data.id, status: 3},
                        success: function (res) {
                            if (res.success) {
                                layer.msg("已终止", {icon: 1});
                                setTimeout(function () {

                                }, 1500);
                                layer.close(index);

                                tableIns.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2});
                            }
                        }
                    });
                });
            }
        });

        function getJson() {
            return {
                where: {
                    status: checkStatus
                    , title: $("input[name='title']").val()
                }
            };
        }

        var checkStatus = null;
        form.on('select(dis)', function (data) {
            checkStatus = (data.value); //得到被选中的值
        });


        $("#search").click(function () {
            tableIns.reload(getJson());
        })


    });
</script>

</body>
</html>